<template>
<!-- 	<view id="index">
		<view class="u-wrap">
			<view style="padding:20rpx;">
				<u-search @click="navigateToSearch()" @custom="navigateToSearch" disabled=true font-size="28" placeholder="请输入商品"></u-search>
			</view>
			
			<view class="u-menu-wrap">
				<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
					<view v-for="(item,index) in list" :key="index" class="u-tab-item" :class="[current==index ? 'u-tab-item-active' : '']"
					 :data-current="index" @tap.stop="swichMenu(index)">
						<text class="u-line-1">{{item.name}}</text>
					</view>
				</scroll-view>
				<block>
					<scroll-view scroll-y class="right-box"  @scrolltolower="onreachBottom" :scroll-top="scrollTop">
						<view class="page-view">
							<view class="class-item">
								<view class="item-title">
									<text>服装</text>
								</view>
								<view class="item-container">
									<view class="thumb-box" v-for="(item,index) in tabbar" :key="item.goodsId"  @click="navigateToDetail(item.goodsId)">
										<image class="item-menu-image" :src="item.goodsThumbUrl" mode=""></image>
										<view class="item-menu-name u-line-1" style="width: 80%;">{{item.goodsName}}</view>
									</view>
								</view>
								<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
							</view>
						</view>
					</scroll-view>
				</block>
			</view>
		</view>
	</view> -->
	<view id="index">
		<view style="padding:20rpx;">
			<u-search @click="navigateToSearch()" @custom="navigateToSearch" disabled=true font-size="28" placeholder="请输入商品"></u-search>
		</view>
		<view>
			<u-tabs-swiper :show-bar="false" ref="uTabs" :list="list" :current="current" @change="tabsChange" is-scroll=false
			 swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper style="height: calc(100vh - 188upx);"  @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom" :scroll-top="scrollTop">
					<view>
						<u-grid :col="3" >
							<u-grid-item v-for="(item, index) in tabs" :key="item.goodsId" @click="navigateToDetail(item.goodsId)">
								<image class="img" :src="item.goodsThumbUrl"></image>
								<view class="grid-text u-line-1">{{item.goodsName}}</view>	
								<view style="color:red">
									{{Math.floor(item.price*100)/100}}
								</view>
								<view style="text-decoration:line-through;color: #999;">	
									{{item.marketPrice}}
								</view>
							</u-grid-item>
						
						</u-grid>
						<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
					</view>
						
				</scroll-view>
			</swiper-item>
		</swiper>
		
		
		<view style="position: fixed;bottom: 20rpx;right: 40rpx;background-color: #fff;border-radius: 50%;padding:20rpx;text-align:center;justify-content: center;" @click="toHome">
			<u-icon label=" " size="60" name="home"></u-icon>
		</view>
				
	</view>
</template>

<script>
	import { goodsCategory, queryGoods, convert } from '../../util/api/request.js'
	export default {
		props: ['categorytext'],
		data() {
			return {
				
				// tabbar: [],
				// list:[],
				// scrollTop: 0, //tab标题的滚动条位置
				// current: 0, // 预设当前项的值
				// menuHeight: 0, // 左边菜单的高度
				// menuItemHeight: 0, // 左边菜单item的高度
				list: [],
				tabs: [],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				page: 1,
				currentId: 1,
				status: 'loading',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				scrollTop: 0,
				
				keyword: '',
			
			}
		},
		onReady() {
			// this.getMenuItemTop()
		},
		mounted() {
			this.category();
		},
		methods: {
			
			
			// tabs通知swiper切换
			tabsChange(index) {
				console.log(120)
				// uni.pageScrollTo({
				//      scrollTop:0
				//     })
				this.status = 'loading'
				this.scrollTop = 0;
				this.tabs = [];
				console.log(index)
				console.log(this.list[index].id)
				this.swiperCurrent = index;
				this.current = index;
				this.currentId = this.list[index].id
				this.page = 1;
				
				this.categoryGoods();
			
			},
			
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				console.log("bottom")
				this.status = 'loading'
				this.page ++;
				this.categoryGoods();
			},
			
			
			// getImg() {
			// 	return Math.floor(Math.random() * 35);
			// },
			// 点击左边的栏目切换
			// async swichMenu(index) {
			// 	if(index == this.current) return ;
			// 	this.current = index;
			// 	// 如果为0，意味着尚未初始化
			// 	if(this.menuHeight == 0 || this.menuItemHeight == 0) {
			// 		await this.getElRect('menu-scroll-view', 'menuHeight');
			// 		await this.getElRect('u-tab-item', 'menuItemHeight');
			// 	}
			// 	// 将菜单菜单活动item垂直居中
			// 	this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
				
			// 	// this.scrollTop = 0;
			// 	this.swiperCurrent = index;
			// 	this.current = index;
			// 	this.currentId = this.list[index].id
			// 	this.page = 1;
			// 	this.status = 'loading'
			// 	this.categoryGoods();
			// },
			// 获取一个目标元素的高度
			// getElRect(elClass, dataVal) {
			// 	new Promise((resolve, reject) => {
			// 		const query = uni.createSelectorQuery().in(this);
			// 		query.select('.' + elClass).fields({size: true},res => {
			// 			// 如果节点尚未生成，res值为null，循环调用执行
			// 			if(!res) {
			// 				setTimeout(() => {
			// 					this.getElRect(elClass);
			// 				}, 10);
			// 				return ;
			// 			}
			// 			this[dataVal] = res.height;
			// 		}).exec();
			// 	})
			// },
			
			
			/**
			 * 获取分类
			 */
			category() {
				console.log("category", this.categorytext)
				let that = this;
				that.page = 1;
				goodsCategory({source: this.categorytext}).then(res=>{
					console.log(res)
					let obj = res.data;
					let list = [];
					Object.keys(obj).forEach(item=>{
						list.push({
							name: obj[item],
							id: item
						})
					})
					that.list = list;
					that.currentId = 1;
					that.categoryGoods();
				})
			},
			
			
			/**
			 * 分类下的列表
			 */
			categoryGoods() {
				// * source 来源 jd-京东,vip-唯品会,pdd-拼多多,kaola-考拉,taobao-淘宝 默认vip  N
				// * cat 分类ID 默认1 Y
				// * page 页码 默认 1
				// * pageSize 每页显示多少，默认20
				// * sub_share_rate  分成比例 1代表100%，0.9代表90%，默认1
				let that = this;
				let obj = {};
				obj.source = that.categorytext;
				obj.cat = that.currentId || 1;
				obj.page = this.page || 1;
				queryGoods(obj).then(res=>{
					console.log(res.data)	
					if(res.data.length<=0){
						that.status = 'nomore'
						return;
					}
					if(that.page>1){
						that.tabs = that.tabs.concat(res.data);
						return;
					}
					that.tabs = res.data;
					console.log("tabs",that.tabs)
					
				})
			},
			
			/**
			 * @param {Object} goodsId  商品id
			 * 转到详情
			 */
			navigateToDetail(goodsId) {
			// 	console.log(goodsId)
			
			// let that = this;
			// let obj = {};
			// obj.goodsId = goodsId;
			// obj.sid = Math.floor(Math.random()*10000000000000);
			// convert( obj ).then(res=>{
			// 	// that.list = res.data.goodsCarouselPictures
			// 	console.log("res.data.url",res.data.url)
			// 	uni.navigateTo({
			// 		url: "/pages/index/goodsDetail/goodsDetail?url="+res.data.url
			// 	})
			// })
			
				uni.navigateTo({
					url: "/pages/index/goodsDetail/goodsDetail?goodsId="+goodsId
				})
			
				
			},
			
			
			/**
			 * 到搜索
			 */
			navigateToSearch() {
				uni.navigateTo({
					url: "/pages/index/search/search?category="+this.categorytext
				})
			},
			
			toHome(){
				uni.navigateTo({
					url: "/pages/index/home/home"
				})
			}
			
		}
	};
</script>

<style lang="scss">
	
	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

			
			.img{
				height:200rpx;
				width: 200rpx;
			}
			.grid-text{
				overflow: hidden;
				width: 200rpx;
				
			}
			
			
			
			.u-wrap {
				height: calc(100vh);
				/* #ifdef H5 */
				height: calc(100vh - var(--window-top));
				/* #endif */
				display: flex;
				flex-direction: column;
			}
			
			.u-search-box {
				padding: 18rpx 30rpx;
			}
			
			.u-menu-wrap {
				flex: 1;
				display: flex;
				overflow: hidden;
			}
			
			.u-search-inner {
				background-color: rgb(234, 234, 234);
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				padding: 10rpx 16rpx;
			}
			
			.u-search-text {
				font-size: 26rpx;
				color: $u-tips-color;
				margin-left: 10rpx;
			}
			
			.u-tab-view {
				width: 200rpx;
				height: 100%;
			}
			
			.u-tab-item {
				height: 110rpx;
				background: #f6f6f6;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #444;
				font-weight: 400;	
				line-height: 1;
			}
			
			.u-tab-item-active {
				position: relative;
				color: #000;
				font-size: 30rpx;
				font-weight: 600;
				background: #fff;
			}
			
			.u-tab-item-active::before {
				content: "";
				position: absolute;
				border-left: 4px solid $u-type-primary;
				height: 32rpx;
				left: 0;
				top: 39rpx;
			}
			
			.u-tab-view {
				height: 100%;
			}
			
			.right-box {
				width: 75%;
				background-color: rgb(250, 250, 250);
			}
			
			.page-view {
				padding: 16rpx;
			}
			
			.class-item {
				margin-bottom: 30rpx;
				background-color: #fff;
				padding: 16rpx;
				border-radius: 8rpx;
			}
			
			.item-title {
				font-size: 26rpx;
				color: $u-main-color;
				font-weight: bold;
			}
			
			.item-menu-name {
				font-weight: normal;
				font-size: 24rpx;
				color: $u-main-color;
			}
			
			.item-container {
				display: flex;
				flex-wrap: wrap;
			}
			
			.thumb-box {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-top: 20rpx;
			}
			
			.item-menu-image {
				width: 120rpx;
				height: 120rpx;
			}
</style>